<template>
  <div class="personal">
    <div v-title data-title='个人中心'></div>
    <!-- 顶部个人中心 -->
    <router-link :to="{path:`/editProfile/${userinfo.id}`}">
      <div class="profile">
        <img :src="userinfo.head_img" />
        <div class="profile-center">
          <div class="name">
            <span
              class="iconfont"
              :class="userinfo.gender == 1 ? 'iconxingbienan' : 'iconxingbienv'"
            ></span>{{userinfo.nickname}}
          </div>
          <div class="time">2021-4-5</div>
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <!-- 中间单元格 -->
    <mycell @click.native="$router.push({name:'myfollows'})">
      <template v-slot:title>我的关注</template>
      <template #desc>关注的用户</template>
    </mycell>
    <mycell>
      <template #title>我的跟帖</template>
      <template #desc>跟帖/回复</template>
    </mycell>
    <mycell @click.native="$router.push({path: '/mystars'})">
      <template #title>我的收藏</template>
      <template #desc>文章/视频</template>
    </mycell>
    <mycell>
      <template #title>设置</template>
    </mycell>
    <!-- 退出按钮 -->
    <mybutton type="danger" style="margin:10px auto" @click.native="$router.push({name: 'login'})">退出</mybutton>
  </div>
</template>

<script>
import mybutton from "@/components/mybutton";
import mycell from "@/components/mycell";
import { getUserInfo} from "@/apis/user";
import axios from "@/utils/request";
export default {
  data() {
    return {
      userinfo: {},
    };
  },
  components: {
    mybutton,
    mycell,
  },
  mounted() {
    getUserInfo(this.$route.params.id)
      .then((res) => {
        console.log(res);
        if (res.data.message == "获取成功") {
          this.userinfo = res.data.data;
          this.userinfo.head_img = this.userinfo.head_img
            ? axios.defaults.baseURL + this.userinfo.head_img
            : "http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg";
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style lang="less" scoped>
.personal {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
</style>